<jsp:include page="/WEB-INF/jsp/common/_head.jsp"></jsp:include>
<body>
<style type="text/css">
  td.polyhedral { text-align : center; }
  td.polyhedral img { zoom : 50%; }
  span.element { font-size:24px;font-weight:bold;letter-spacing:1px;
    -webkit-text-stroke-width: 1px;-webkit-text-stroke-color: rgba(0, 0, 0, 0.25);
    text-shadow: rgba(0,0,0,0.5) 1px 1px 2px; }
  span.aether, span.spirit { font-size:24px;font-style:italic;letter-spacing:1px;color:rgb(192,255,192);
    -webkit-text-stroke-width: 1px;-webkit-text-stroke-color: rgba(0,0,0,0.25);
    text-shadow: rgba(0,0,0,0.5) 1px 1px 2px; }
</style>
<div id="periodic_table" class="tabs" style="width:980px;">
  <button onclick="window.location.href = '/';" class='p-absolute' style="right:4px;">Home</button>
  <ul>
    <li><a href="#guide">Guide</a></li>
    <li><a href="#squares">Periodic Squares</a></li>
  </ul>
  <div id="guide" class="accordion" style="width:940px;">
    <h3><a name="element" href="#element">Classical Elements</a></h3>
    <div>
      <table style="height:200px;">
        <tr>
          <td style="width:25%; text-align: center;">
            <img src="/assets/elements4.jpg" style="zoom:50%;box-shadow: 0px 0px 32px 16px rgba(0,0,0, 0.5);border-radius: 140px;">
          </td>
          <td style="width: 45%;">
            <p>
              Classical thought there are four frequently-occurring elements :
            </p>
            <p class="a-center" style="">
              <span class="element" style="color:rgb(224,128,96);">Fire</span>,
              <span class="element" style="color:rgb(192,224,255);">Air</span>,
              <span class="element" style="color:rgb(0,196,0);">Earth</span>, and
              <span class="element" style="color:rgb(0,96,192);">Water</span>.
            </p>
            <p>
              In 18th century BC, a Babylonian text described five elements :
            </p>
            <p class="a-center">
              <span class="element" style="color:rgb(224,128,96);">Fire</span>,
              <span class="element" style="color:rgb(192,224,255);">Wind</span>,
              <span class="element" style="color:rgb(0,196,0);">Earth</span>,
              <span class="element" style="color:rgb(0,96,192);">Sea</span>, and
              <span class="element" style="color:rgb(192,255,192);">Heaven</span>
            </p>
            <p class="a-right">
              In classic Greece, the fifth element was called <span class="aether">Aether</span>.
            </p>
            <p class="a-right">
              In Japan, <span class="spirit">Spirit</span>.
            </p>
          </td>
        </tr>
      </table>
    </div>
    <h3><a name="plato" href="#plato">Plato's Theory</a></h3>
    <div>
      <table style="width:100%;height:200px;">
        <tr>
          <td colspan="4">
            <p class="a-center" style="font-size:17px;">
              Plato proposed that the four classic elements were composed of small units of matter with different geometry.
            </p>
          </td>
        </tr>
        <tr style="height:200px;">
          <td class="polyhedral">
            <img src="/assets/hexahedron.png">
            <p>Hexahedron (Earth)</p>
          </td>
          <td class="polyhedral">
            <img src="/assets/icosahedron.png">
            <p>Icosahedron (Water)</p>
          </td>
          <td class="polyhedral">
            <img src="/assets/octahedron.png">
            <p>Octahedron (Air)</p>
          </td>
          <td class="polyhedral">
            <img src="/assets/tetrahedron.png">
            <p>Tetrahedron (Fire)</p>
          </td>
        </tr>
      </table>
    </div>
    <h3><a name="alchemy" href="#alchemy">Alchemy</a></h3>
    <div>
      <p>
        Alchemy is the name we give to early chemists
        Before we started to suspect it was impossible, alchemists worked for over three thousand years to convert common metals like iron and copper
        into rare metals like gold and silver.
      </p>
      <p>

      </p>
    </div>
    <h3><a name="modern" href="#modern">Early Modern Chemistry</a></h3>
    <div>
      <table styl="height:200px;">
        <tr>
          <td style="width:40%;">
            <p>
              In 1661, an Anglo-Irish chemist by the name of Robert Boyle defined an element as substance that cannot be broken down into a simpler substance by a chemical reaction.
            </p>
            <p>
              In 1789, a French chemist by the name of Antoine Lavoisier published a list of 33 chemical elements in his book Elementary Treatise of Chemistry
            </p>
          </td>
          <td class="a-center" style="width:60%;">
            <div style="height:180px;overflow:scroll;">
              <img src="/assets/tableau.gif" style="width:100%;">
            </div>
            Lavoisier's "???"
          </td>
        </tr>
      </table>
    </div>
    <h3><a name="triads" href="#triads">Law of Triads</a></h3>
    <div>
      Law of Triads
    </div>
    <h3><a name="first" href="#first">The First Periodic Table</a></h3>
    <div>
      <table style="height:200px;width:100%;">
        <tr>
          <td>
            <p style="width:255px;">
              A Russian chemist by the name of Dimitri Mendeleev was the first to organize the chemical elements in a periodic table much like the one we use today. He left space for elements not yet discovered like all of the noble gases.
            </p>
          </td>
          <td class="a-center">
           <div style="height:180px;overflow:scroll;">
             <img src="/assets/periodicity.jpg" style="zoom:25%;">
           </div>
            Mendeleev's "The Periodicity of the Elements"
          </td>
        </tr>
      </table>
    </div>
<%--
    <h3><a name="table" href="#table">Periodic Table</a></h3>
    <div>
      <p>
        Today, we know there are 94 naturally occurring elements on our planet and we've identified another 24 elements in laboratory.
      </p>
    </div>
--%>
  </div>
  <div id="squares" class="accordion" style="width:940px;">
    <h4><a name="square" href="#square">Square</a></h4>
    <div>
      Square
    </div>
  </div>
</div>
</body>